<template>
  <div class="findsearch">
    <div class="search_wrap">
      <div class="history">
        <!-- 搜索框 -->

        <form action="/">
          <van-search
            v-model="value"
            show-action
            placeholder="搜索游戏、用户、厂商或帖子"
            @search="onSearch"
            @cancel="onCancel"
          />
          <ol>
            <li
              v-for="item in state.titlelist"
              :key="item.id"
              @click="todetail"
            >
              {{ item.title }}
            </li>
          </ol>
        </form>
        <!-- 搜索历史框 -->
        <ul>
          <li v-for="(item, index) in state.arr" :key="index">
            <div class="left" @click="todetail1(item)">
              <img src="../../public/searchImg/1.png" alt="" />
              <span>{{ item }}</span>
            </div>
            <div class="right" @click="remove(index)">x</div>
          </li>
        </ul>
        <b>显示全部</b>
      </div>

      <!-- 热门搜索 -->
      <div class="hotsearch">
        <p>热门搜索</p>
        <ul>
          <li><span>1</span>机动战机:聚变</li>
          <li><span>2</span>原神</li>
          <li><span>3</span>明日方舟</li>
          <li><span>4</span>少前:追放</li>
        </ul>
        <b>显示全部</b>
      </div>
      <!-- 热门游戏标签 -->
      <div class="hotgames_notic">
        <p>热门游戏标签</p>
        <div class="noticimg">
          <img src="../../public/searchImg/2-1.png" alt="" />
          <img src="../../public/searchImg/2-2.png" alt="" />
          <img src="../../public/searchImg/2-3.png" alt="" />
          <img src="../../public/searchImg/2-4.png" alt="" />
          <img src="../../public/searchImg/2-5.png" alt="" />
          <img src="../../public/searchImg/2-6.png" alt="" />
          <img src="../../public/searchImg/2-7.png" alt="" />
          <img src="../../public/searchImg/2-8.png" alt="" />
          <img
            src="../../public/searchImg/2-9.png"
            alt=""
            style="width: 74px"
          />
          <img src="../../public/searchImg/2-10.png" alt="" />
        </div>
      </div>
      <div class="box2"></div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
export default {
  setup() {
    const state = reactive({
      titlelist: [],
      arr: [],
    });
    if (localStorage.getItem("title")) {
      state.arr = localStorage
        .getItem("title")
        .split(",")
        .filter(function (value, index, array) {
          return array.indexOf(value) === index; //绝对不会重复的
        });
    }
    const value = ref("");
    const router = useRouter();
    const onSearch = () => {
      axios
        .post("http://121.199.14.205:3000/api/search", {
          title: value.value,
        })
        .then(function (response) {
          state.data = response.data;
          state.titlelist = response.data.result;
        });
    };
    const onCancel = () => {
      router.push("/home/index");
    };
    const todetail = () => {
      state.arr.unshift(value.value);
      localStorage.setItem("title", state.arr);
      router.push("/detail/" + state.titlelist[0].id);
    };
    const todetail1 = (item) => {
      axios
        .post("http://121.199.14.205:3000/api/search", {
          title: item,
        })
        .then(function (response) {
          router.push("/detail/" + response.data.result[0].id);
        });
    };
    const remove = (i) => {
      state.arr.splice(i, 1);
      localStorage.setItem("title", state.arr);
    };
    return { value, onSearch, onCancel, state, todetail, remove, todetail1 };
  },
};
</script>

<style lang="less">
html {
  width: 100%;
  height: 100%;

  .findsearch {
    background: #eeeeee;
    height: 100%;
    form {
      position: relative;
      ol {
        position: absolute;
        padding: 0 30px;
        z-index: 999;
        top: 44px;
        left: 0;
        width: 100%;
        background: #fff;
        li {
          height: 40px;
          line-height: 40px;
          font-size: 16px;
        }
      }
    }
    .search_wrap {
      .history {
        height: 190px;
        width: 100%;
        background: white;

        ul {
          margin-bottom: 15px;
          margin-left: 15px;
          height: 100px;
          overflow: scroll;

          li {
            width: 100%;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #eeeeee;
            display: flex;
            justify-content: space-between;

            .left {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #000000;
              text-indent: 10px;
              width: 350px;
              img {
                height: 13px;
                width: 13px;
                margin-right: 10px;
              }
            }
            .right {
              margin-right: 20px;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #000000;
              text-indent: 30px;
            }
          }
        }
        b {
          display: block;
          font-size: 12px;
          color: #34c3c6;
          margin-left: 163px;
        }
      }
      .hotsearch {
        margin-top: 10px;
        width: 100%;
        height: 187.5px;
        background: white;
        P {
          display: inline-block;
          padding: 15px;
          font-size: 16px;
          font-weight: bold;
          font-family: PingFang SC;
          color: #333333;
          line-height: 12px;
        }
        b {
          display: block;
          font-size: 12px;
          color: #34c3c6;
          margin-left: 163px;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          margin: 0 15px;
          height: 120px;
          justify-content: space-between;
          overflow: hidden;
          li {
            span {
              color: #34c3c6;
              margin-right: 5px;
            }
            height: 40px;
            width: 48%;
            flex-shrink: 0;
            margin-bottom: 5px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #000000;
            line-height: 40px;
          }
        }
      }
      .hotgames_notic {
        margin-top: 10px;
        height: 120px;
        background: white;
        p {
          display: inline-block;
          margin-left: 15px;
          font-size: 16px;
          font-weight: bold;
          font-family: PingFang SC;
          color: #333333;
          line-height: 12px;
        }
        .noticimg {
          display: flex;
          width: 90%;
          flex-wrap: wrap;
          margin-left: 15px;
          margin-top: 10px;

          img {
            width: 47px;
            height: 24px;
            margin-right: 7.5px;
            margin-bottom: 8px;
          }
        }
      }
      .box2 {
        height: 149.5px;
        width: 100%;
        background: #eeeeee;
      }
    }
  }
}
</style>
